<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">

    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="../asserts/css/bootstrap.min.css" rel="stylesheet"
          th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.css}">
    <!-- Custom styles for this template -->
    <link href="../asserts/css/dashboard.css" rel="stylesheet" th:href="@{/asserts/css/dashboard.css}">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<!--引入抽取的topbar-->
<!--模版名:是使用thymeleaf的前后缀配置规则进行解析-->
<div th:replace="~{commons/bar::topbar}"></div>

<div class="container-fluid">
    <div class="row">
        <!--引入侧边栏-->
        <div th:replace="~{commons/bar::#sidebar(activeUri='emps')}"></div>

        <main class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" role="main">
            <!--需要区分是员工修改还是添加-->
            <form method="post" th:action="@{/emp}">
                <!--发送put请求修改员工数据-->
                <!--
                   传统做法：
                   1.在SpringMVC中配置HiddenHttpMethodFilter（SpringBoot自动配置好的）
                   2.页面创建一个post表单
                   3.创建一个input项，name="_method",值就是指定的请求方式
                -->
                <input name="_method" th:if="${employee!=null}" type="hidden" value="put">
                <input name="id" th:if="${employee!=null}" th:value="${employee!=null}?${employee.id}" type="hidden">
                <div class="form-group">
                    <label for="lastname">Last Name</label>
                    <input class="form-control" id="lastname" name="lastName" placeholder="lastName"
                           th:value="${employee!=null}?${employee.lastName}" type="text">
                </div>
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input class="form-control" id="email" name="email" placeholder="name@example.com"
                           th:value="${employee!=null}?${employee.email}" type="email">
                </div>
                <div class="form-group">
                    <label for="genderRadio">Gender</label>
                    <div id="genderRadio">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" id="inlineRadio1" name="gender"
                                   th:checked="${employee!=null}?${employee.gender==1}" type="radio" value="1">
                            <label class="form-check-label" for="inlineRadio1">男</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" id="inlineRadio2" name="gender"
                                   th:checked="${employee!=null}?${employee.gender==0}" type="radio" value="0">
                            <label class="form-check-label" for="inlineRadio2">女</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="dept">Department</label>
                    <!--提交的是部门id-->
                    <select class="form-control" id="dept" name="department.id">
                        <option th:each="dept:${depts}"
                                th:selected="${employee!=null}?${employee.department.id == dept.id}"
                                th:value="${dept.id}">[[${dept.departmentName}]]
                        </option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="birth">Birth</label>
                    <div class="input-group date" data-provide="datepicker" id="birth">
                        <input class="form-control" name="birth" placeholder="1990/02/01"
                               th:value="${employee!=null}?${#dates.format(employee.birth,'yyyy-MM-dd')}" type="text">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <button class="btn btn-primary" th:text="${employee!=null}?'修改':'添加'" type="submit">添加</button>
                </div>
            </form>
        </main>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.3.1/jquery.js}"
        type="text/javascript"></script>
<script src="../asserts/js/popper.min.js" th:src="@{/asserts/js/popper.min.js}" type="text/javascript"></script>
<script src="../asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.1.3/js/bootstrap.js}"
        type="text/javascript"></script>
<script th:src="@{/webjars/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js}"
        type="text/javascript"></script>
<script th:src="@{/webjars/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js}"
        type="text/javascript"></script>

<!--bootstrap-datepicker-->
<script src="../asserts/js/bootstrap-datepicker.js" th:src="@{asserts/js/bootstrap-datepicker.js}"></script>
<link href="../asserts/css/bootstrap-datepicker3.min.css" rel="stylesheet"
      th:href="@{asserts/css/bootstrap-datepicker3.min.css}"
      type="text/css">
<script src="../asserts/js/bootstrap-datepicker.zh-CN.min.js"
        th:src="@{asserts/js/bootstrap-datepicker.zh-CN.min.js}"></script>
<script type="text/javascript">
    $(".date").datepicker({
        autoclose: true,//选中之后自动隐藏日期选择框
        language: "zh-CN",
        format: 'yyyy/mm/dd'
    });
</script>

<!-- Icons -->
<script src="../asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}" type="text/javascript"></script>
<script>
    feather.replace()
</script>

</body>

</html>